<template>
  <div class="dashboard-container">
    <div id="chart1" class="dashboard-chart1" />
    <div class="dashboard-center">
      <div class="dashboard-chart2" />
      <div id="chart3" class="dashboard-chart3" />
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'Dashboard',
  mounted() {
    this.setChart1()
    this.setChart3()
  },
  methods: {
    setChart1() {
      const myChart = echarts.init(document.getElementById('chart1'))
      const data = [
        /* 服务器位置**/
        {
          name: '服务器1',
          tooltip: {
            formatter: '{b}: 19999<br />'
          },

          value: [700, 200],
          symbol: 'image://',
          symbolSize: [60, 40],
          x: 800,
          y: 400,
          fixed: true,
          // draggable: false,
          category: 1,
          label: {
            color: '#808080',
            position: 'bottom'
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#157eff'
                },
                {
                  offset: 1,
                  color: '#35c2ff'
                }
              ])
            }
          }
        },
        {
          name: '服务器2',
          x: 400,
          y: 400,
          value: [350, 300],
          fixed: true,
          symbol: 'image://',
          symbolSize: [60, 40],
          label: {
            color: '#808080',
            position: 'bottom'
          },
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#157eff'
                },
                {
                  offset: 1,
                  color: '#35c2ff'
                }
              ])
            }
          }
        },
        {
          name: '数据库1',
          value: [0, 0],
          fixed: true,
          symbol: 'image://',
          symbolSize: [60, 30],
          label: {
            color: '#808080'
          },
          category: 1,

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402'
                },
                {
                  offset: 1,
                  color: '#ffdc84'
                }
              ])
            }
          }
        },
        {
          name: '数据库2',
          symbol: 'image://',
          symbolSize: [60, 30],
          label: {
            color: '#808080',
            position: 'bottom'
          },
          value: [0, 400],

          x: 200,
          y: 500,
          fixed: true,
          category: 1,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402'
                },
                {
                  offset: 1,
                  color: '#ffdc84'
                }
              ])
            }
          }
        },
        {
          name: '自建服务器',
          symbol: 'image://',
          symbolSize: [60, 30],
          label: {
            color: '#808080',
            position: 'bottom'
          },
          x: 600,
          y: 200,
          value: [600, 600],

          fixed: true,

          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402'
                },
                {
                  offset: 1,
                  color: '#ffdc84'
                }
              ])
            }
          },
          category: 2
        },
        {
          name: '备份服务器',
          symbol: 'image://',
          symbolSize: [60, 30],
          label: {
            color: '#808080',
            position: 'bottom'
          },
          value: [1000, 500],

          x: 1000,
          y: 500,
          fixed: true,
          category: 2,
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                {
                  offset: 0,
                  color: '#ffb402'
                },
                {
                  offset: 1,
                  color: '#ffdc84'
                }
              ])
            }
          }
        }
      ]
      const option = ({
        xAxis: {
          show: false,
          type: 'value'
        },
        yAxis: {
          show: false,
          type: 'value'
        },
        grid: {
          left: 50,
          right: 60,
          top: 30,
          bottom: 30
        },
        tooltip: {},
        series: [
          {
            type: 'graph',
            zlevel: 5,
            draggable: false,
            coordinateSystem: 'cartesian2d', // 使用二维的直角坐标系（也称笛卡尔坐标系）
            symbol: 'rect',
            symbolOffset: ['15%', 0],
            label: {
              normal: {
                show: true
              }
            },
            data: data,
            links: [
              {
                source: '数据库2',
                target: '服务器2'
              },
              {
                source: '数据库1',
                target: '服务器2'
              },
              {
                source: '服务器2',
                target: '服务器1'
              },
              {
                source: '自建服务器',
                target: '服务器1'
              },
              {
                source: '服务器1',
                target: '备份服务器',
                lineStyle: {
                  normal: {
                    color: 'red',
                    curveness: 0.3
                  }
                }
              }
            ],
            /** 设置服务器件的连线样式*/
            lineStyle: {
              normal: {
                opacity: 1,
                color: '#53B5EA',
                curveness: 0.3,
                width: 2
              }
            }
          },
          /** 分发点*/
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            zlevel: 2,
            animation: false,
            effect: {
              show: true,
              period: 5,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: 'pin',
              loop: true,
              color: 'rgba(55,155,255,0.5)'
            },
            lineStyle: {
              normal: {
                color: '#22AC38',
                width: 0,
                curveness: 0.3
              }
            },
            data: [
              {
                coords: [
                  [0, 0],
                  [350, 300]
                ]
              },
              {
                coords: [
                  [0, 400],
                  [350, 300]
                ]
              },
              {
                coords: [
                  [350, 300],
                  [700, 200]
                ]
              },
              {
                coords: [
                  [600, 600],
                  [700, 200]
                ]
              }
            ]
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            zlevel: 2,
            animation: false,
            effect: {
              show: true,
              period: 4,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: 'pin',
              loop: true,
              color: 'rgba(55,155,255,0.5)'
            },
            lineStyle: {
              normal: {
                color: '#22AC38',
                width: 0,
                curveness: 0.3
              }
            },
            data: [
              {
                coords: [
                  [0, 0],
                  [350, 300]
                ]
              },
              {
                coords: [
                  [0, 400],
                  [350, 300]
                ]
              },
              {
                coords: [
                  [350, 300],
                  [700, 200]
                ]
              },
              {
                coords: [
                  [600, 600],
                  [700, 200]
                ]
              }
            ]
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            zlevel: 2,
            animation: false,
            effect: {
              show: true,
              period: 6,
              trailLength: 0.01,
              symbolSize: 12,
              symbol: 'pin',
              loop: true,
              color: 'rgba(55,155,255,0.5)'
            },
            lineStyle: {
              normal: {
                color: '#22AC38',
                width: 0,
                curveness: 0.3
              }
            },
            data: [
              {
                coords: [
                  [0, 0],
                  [350, 300]
                ]
              },
              {
                coords: [
                  [0, 400],
                  [350, 300]
                ]
              },
              {
                coords: [
                  [350, 300],
                  [700, 200]
                ]
              },
              {
                coords: [
                  [600, 600],
                  [700, 200]
                ]
              }
            ]
          },
          {
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            z: 1,
            zlevel: 2,
            animation: false,
            effect: {
              show: true,
              period: 3,
              trailLength: 0.01,
              symbolSize: 14,
              symbol: 'pin',
              loop: true,
              color: 'red'
            },
            lineStyle: {
              normal: {
                color: '#22AC38',
                width: 0,
                curveness: 0.3
              }
            },
            data: [
              {
                coords: [
                  [700, 200],
                  [1000, 500]
                ]
              }
            ]
          }
        ]
      })
      myChart.setOption(option)
    },
    setChart3() {
      const myChart = echarts.init(document.getElementById('chart3'))
      const colors = [
        {
          c1: '#00c7ef',
          c2: '#0AF3FF'
        },
        {
          c1: '#FF8E14',
          c2: '#FFA12F'
        },
        {
          c1: '#AF5AFF',
          c2: '#B62AFF'
        },
        {
          c1: '#25dd59',
          c2: '#29f463'
        },
        {
          c1: '#6E35FF',
          c2: '#6E67FF'
        },
        {
          c1: '#002AFF',
          c2: '#0048FF'
        },
        {
          c1: '#8CD282',
          c2: '#95F300'
        },
        {
          c1: '#3B0EFF',
          c2: '#604BFF'
        },
        {
          c1: '#00BE74',
          c2: '#04FDB8'
        },
        {
          c1: '#4a3ac6',
          c2: '#604BFF'
        }
      ]
      var listData = [
        {
          name: '系统',
          value: 0,
          list: [
            {
              name: '系统配置',
              value: '0-0',
              list: [
                {
                  name: '部门管理',
                  value: '0-0-0',
                  list: [

                  ]
                }, {
                  name: '用户管理',
                  value: '0-0-1',
                  list: [

                  ]
                }, {
                  name: '角色管理',
                  value: '0-0-2',
                  list: [

                  ]
                },
                {
                  name: '权限管理',
                  value: '0-0-3',
                  list: [

                  ]
                }, {
                  name: '日志管理',
                  value: '0-0-4',
                  list: [

                  ]
                }
              ]
            }, {
              name: '首页',
              value: '0-1',
              list: []
            },
            {
              name: '基础配置',
              value: '0-2',
              list: [
                {
                  name: '数据源配置',
                  value: '0-2-0',
                  list: []
                }, {
                  name: '定时任务管理',
                  value: '0-2-1',
                  list: []
                }
              ]
            },
            {
              name: '备份数据配置',
              value: '0-3',
              list: []
            }
          ]
        }
      ]
      var list = []
      var links = []
      var legend = []
      var categories = listData[0].list.map(item => {
        return {
          name: item.name
        }
      })
      var legendColor = colors.map(item => item.c2)
      handle2(JSON.parse(JSON.stringify(listData)), 0)
      handle3(JSON.parse(JSON.stringify(listData)), 0)
      // 计算list
      function handle2(arr, idx, color, category) {
        arr.forEach((item, index) => {
          if (item.name === null) {
            return false
          }
          // 设置节点大小
          let symbolSize = 10
          switch (idx) {
            case 0:
              symbolSize = 70
              break
            case 1:
              symbolSize = 50
              break
            default:
              symbolSize = 10
              break
          }

          // 每个节点所对应的文本标签的样式。
          let label = null
          switch (idx) {
            case 0:
            case 1:
              label = {
                position: 'inside',
                rotate: 0
              }
              break
            default:
              break
          }

          // 计算出颜色,从第二级开始
          if (idx === 0) {
            color = colors[0]
          }
          if (idx === 1) {
            color = colors.find((itemm, eq) => eq === index % 10)
            legend.push(item.name)
          }
          // 设置线条颜色
          const lineStyle = {
            color: color.c2
          }
          // 设置节点样式
          let bgcolor = null
          if (idx === 0) {
            bgcolor = {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                offset: 0,
                color: color.c1 // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: color.c1 // 80% 处的颜色
              },
              {
                offset: 1,
                color: 'rgba(0, 0, 0, 0.3)' // 100% 处的颜色
              }
              ],
              global: false
            }
          } else {
            bgcolor = {
              type: 'radial',
              x: 0.5,
              y: 0.5,
              r: 0.5,
              colorStops: [{
                offset: 0,
                color: color.c1 // 0% 处的颜色
              },
              {
                offset: 0.4,
                color: color.c1 // 0% 处的颜色
              },
              {
                offset: 1,
                color: color.c2 // 100% 处的颜色
              }
              ],
              global: false
            }
          }
          let itemStyle = null
          if (item.list && item.list.length !== 0) {
            // 非子节点
            itemStyle = {
              borderColor: color.c2,
              color: bgcolor
            }
          } else {
            // 子节点
            item.isEnd = true
            if (item.isdisease === 'true') {
              itemStyle = {
                color: color.c2,
                borderColor: color.c2
              }
            } else {
              itemStyle = {
                color: 'transparent',
                borderColor: color.c2
              }
            }
          }
          // 可以改变来实现节点发光效果，但体验不好
          itemStyle = Object.assign(itemStyle, {
            shadowColor: 'rgba(255, 255, 255, 0.5)',
            shadowBlur: 10
          })

          if (idx === 1) {
            category = item.name
          }
          let obj = {
            name: item.name,
            symbolSize: symbolSize,
            category: category,
            label,
            color: bgcolor,
            itemStyle,
            lineStyle
          }
          obj = Object.assign(item, obj)
          if (idx === 0) {
            obj = Object.assign(obj, {
              root: true
            })
          }
          if (item.list && item.list.length === 0) {
            obj = Object.assign(obj, {
              isEnd: true
            })
          }
          list.push(obj)
          if (item.list && item.list.length > 0) {
            handle2(item.list, idx + 1, color, category)
          }
        })
      }
      // 计算links
      function handle3(arr, index, color) {
        arr.forEach(item => {
          if (item.list) {
            item.list.forEach((item2, eq) => {
              if (index === 0) {
                color = colors.find((itemm, eq2) => eq2 === eq % 10)
              }
              let lineStyle = null
              switch (index) {
                case 0:
                  if (item2.list.length > 0) {
                    lineStyle = {
                      normal: {
                        color: 'target'
                      }
                    }
                  } else {
                    lineStyle = {
                      normal: {
                        color: color.c2
                      }
                    }
                  }
                  break
                default:
                  lineStyle = {
                    normal: {
                      color: 'source'
                    }
                  }
                  break
              }
              const obj = {
                source: item.name,
                target: item2.name,
                lineStyle
              }
              links.push(obj)
              if (item2.list && item.list.length > 0) {
                handle3(item.list, index + 1)
              }
            })
          }
        })
      }

      const option = {
        backgroundColor: '#000',
        toolbox: {
          show: true,
          left: 'right',
          right: 20,
          top: 'bottom',
          bottom: 20
        },
        color: legendColor,
        legend: {
          show: false,
          data: legend,
          textStyle: {
            color: '#fff',
            fontSize: 10
          },
          // inactiveColor: "#fff",
          icon: 'circle',
          type: 'scroll',
          orient: 'vertical',
          left: 'right',
          right: 20,
          top: 20,
          bottom: 80,
          // itemWidth: 12,
          // itemHeight: 12,
          pageIconColor: '#00f6ff',
          pageIconInactiveColor: '#fff',
          pageIconSize: 12,
          pageTextStyle: {
            color: '#fff',
            fontSize: 12
          }
        },
        selectedMode: 'false',
        bottom: 20,
        left: 0,
        right: 0,
        top: 0,
        animationDuration: 1500,
        animationEasingUpdate: 'quinticInOut',
        series: [{
          name: '知识图谱',
          type: 'graph',
          hoverAnimation: true,
          layout: 'force',
          force: {
            repulsion: 300,
            edgeLength: 100
          },
          nodeScaleRatio: 0.6,
          draggable: true,
          roam: true,
          symbol: 'circle',
          data: list,
          links: links,
          categories: categories,
          focusNodeAdjacency: true,
          scaleLimit: {
            // 所属组件的z分层，z值小的图形会被z值大的图形覆盖
            min: 0.5, // 最小的缩放值
            max: 9 // 最大的缩放值
          },
          edgeSymbol: ['circle', 'arrow'],
          edgeSymbolSize: [4, 8],
          label: {
            normal: {
              show: true,
              position: 'right',
              color: '#fff',
              distance: 5,
              fontSize: 10
            }
          },
          lineStyle: {
            normal: {
              width: 1.5,
              curveness: 0,
              type: 'solid'
            }
          }
        }]
      }
      myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    height: calc(100vh - 50px);
    background: var(--subMenuBg);
    color: var(--menuText);
    padding: 10px;
  }
  &-chart1 {
    background: var(--subMenuHover);
    width: 100%;
    height: 200px;
    border-radius: 6px;
  }
  &-center {
    // background: var(--subMenuHover);
    // width: calc((100% - 30px) * 0.6);
    height: 400px;
    margin-top: 10px;
    border-radius: 6px;
    display: flex;
  }
  &-chart2 {
    background: var(--subMenuHover);
    width: calc((100% - 10px) * 0.6);
    height: 400px;
    border-radius: 6px;
  }
  &-chart3 {
    background: var(--subMenuHover);
    width: calc((100% - 10px) * 0.4);
    height: 400px;
    margin-left: 10px;
    border-radius: 6px;
    overflow: hidden;
  }
}
</style>
